Улучшить эту документацию Просмотреть исходный код input[range]

input в модуле ng

Нативное поле ввода диапазона с валидацией и преобразованием.

В версиях v1.5.9 и выше, чтобы избежать конфликтов с уже существующими пользовательскими директивами для input[range], необходимо указать Angular на включение встроенной поддержки. Это делается добавлением атрибута ng-input-range к элементу ввода. Например: <input type="range" ng-input-range ... />

Элементы ввода без атрибута ng-input-range будут обрабатываться так же, как и в предыдущих версиях (например, значение модели будет строкой, а не числом, и Angular не будет учитывать атрибуты/свойства min/max/step).

Примечание: Начиная с версии v1.6.x, поддержка input[range] будет всегда включена, и атрибут ng-input-range не будет иметь никакого эффекта.

Эта страница документации относится к элементам, у которых включена встроенная поддержка; т.е. к элементам с атрибутом ng-input-range.

Модель для поля ввода диапазона всегда должна быть Number.

IE9 и другие браузеры, не поддерживающие тип range, используют текстовое поле без значений по умолчанию для min, max и step. Тем не менее, привязка модели, валидация и обработка чисел поддерживаются.

Браузеры, поддерживающие диапазон (последние версии Chrome, Safari, Firefox, Edge), обрабатывают input[range] таким образом, что ввод никогда не может содержать некорректное значение. Это означает:

любое нечисловое значение устанавливается в (max + min) / 2.
любое числовое значение, меньшее текущего min, или большее текущего max, устанавливается соответственно в min / max.
кроме того, учитывается текущий step, поэтому используется ближайшее значение, удовлетворяющее шагу.

Дополнительную информацию см. в Спецификации HTML для input[type=range].

Это имеет следующие последствия для Angular:

Поскольку значение элемента всегда должно отражать текущее значение модели, поле ввода диапазона установит связанное выражение ngModel в значение, установленное браузером для элемента ввода. Например, в следующем поле ввода <input type="range" ng-input-range ng-model="model.value">, если приложение устанавливает model.value = null, браузер установит значение ввода в '50'. Angular затем установит модель в 50, чтобы предотвратить несоответствие между значением ввода и моделью.

Это означает, что модель для диапазона сразу же установится в 50 после инициализации ngModel. Это также означает, что у поля ввода диапазона никогда не может быть ошибки required.

Это касается не только изменений в значении модели, но и значений атрибутов min, max и step. Когда эти значения меняются таким образом, что это заставит браузер изменить значение ввода, Angular также обновит значение модели.

Автоматическая корректировка значения также означает, что у элемента ввода диапазона никогда не может быть ошибок required, min или max.

Однако, step в настоящее время полностью реализован только в Firefox. У других браузеров возникают проблемы, когда значение шага изменяется динамически — они не корректируют значение элемента правильно, но вместо этого могут установить ошибку stepMismatch. В этом случае Angular установит ошибку step в поле ввода и установит модель в undefined.

Обратите внимание, что input[range] несовместим с ngMax, ngMin и ngStep, поскольку они не устанавливают атрибуты min и max, что означает, что браузер не будет автоматически корректировать значение ввода на основе их значений и всегда будет предполагать min = 0, max = 100 и step = 1.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.

Использование

<input type="range"
       ng-input-range=""
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [step="string"]
       [ng-change="string"]
       [ng-checked="expression"]>

Аргументы

Параметр	Тип	Подробности
ngInputRange		Наличие этого атрибута включает встроенную поддержку для `input[range]`.
ngModel	`string`	Назначаемое выражение Angular для привязки данных.
name (необязательно)	`string`	Имя свойства формы, в котором публикуется элемент управления.
min (необязательно)	`string`	Устанавливает валидацию `min` для проверки, что введенное значение больше `min`. Может быть интерполировано.
max (необязательно)	`string`	Устанавливает валидацию `max` для проверки, что введенное значение меньше `max`. Может быть интерполировано.
step (необязательно)	`string`	Устанавливает валидацию `step` для проверки, что введенное значение соответствует `step`. Может быть интерполировано.
ngChange (необязательно)	`string`	Выражение Angular, которое выполняется при изменении значения ngModel из-за взаимодействия пользователя с элементом ввода.
ngChecked (необязательно)	`expression`	Если выражение истинно, то атрибут `checked` будет установлен для элемента. Обратите внимание: `ngChecked` не следует использовать вместе с `ngModel`. Используйте ngChecked для использования.

Поле ввода диапазона с атрибутами ngMin и ngMax

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/input/input%5Brange%5D